<!--
* @Author: 张昊
* @Date:  2022-10-21 11:15:54
* @FilePath: /pages/mine/order/order.vue
* @Description: 预约订单 五种状态
-->
<template>
	<view class="order">
		<view class="common-list card" v-for="(item, index) in detailsItems" :key="item.id">
			<view class="img"><image class="img" :src="item.image" :alt="item.image" /></view>

			<view class="img-list">
				<view class="img-title" v-if="userData.is_teacher">预约人:{{ item.name }}</view>
				<view class="img-title" v-else>预约老师:{{ item.teacher_name }}</view>
				<view class="img-text">
					<text class="remarks">预约日期:{{ item.day }}</text>
					<text class="remarks" v-for="unit in item.times" :key="unit.id">预约时间:{{ unit.times }}</text>
				</view>
			</view>
			<view class="buttons">
				<view class="tag">
					<template v-if="userData.is_teacher">
						<u-tag v-if="item.status === 2" size="mini" plain type="success" text="预约中"></u-tag>
						<u-tag v-if="item.status === 3" size="mini" plain type="warning" text="已完结"></u-tag>
						<u-tag v-if="item.status === 4" size="mini" plain type="error" text="退款中"></u-tag>
						<u-tag v-if="item.status === 5" size="mini" plain type="error" text="已退款"></u-tag>
					</template>
					<template v-else>
						<u-tag v-if="item.status === 1" size="mini" plain type="error" text="待支付"></u-tag>
						<u-tag v-if="item.status === 2" size="mini" plain type="success" text="预约中"></u-tag>
						<u-tag v-if="item.status === 3" size="mini" plain type="warning" text="已完结"></u-tag>
						<u-tag v-if="item.status === 4" size="mini" plain type="error" text="退款中"></u-tag>
						<u-tag v-if="item.status === 5" size="mini" plain type="error" text="已退款"></u-tag>
					</template>
				</view>
				<view class="button">
					<template v-if="userData.is_teacher">
						<u-button v-if="item.status === 2" @click="clickFinish(item)" size="mini" type="primary" text="点击完结"></u-button>
					</template>
					<template v-else>
						<u-button v-if="item.status === 2" @click="clickCancel(item)" size="mini" type="primary" text="取消预约"></u-button>
					</template>
				</view>
			</view>
		</view>
		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="flag"></txt-pulldown>
	</view>
</template>

<script>
import {
	counselTeacherOrder,
	counselOrder,
	complete, // 点击完结
	refund // 点击取消
} from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
export default {
	mixins: [onReachBottom],
	data() {
		return { detailsItems: [], userData: {} };
	},
	methods: {
		async reqPaging() {
			let userData = uni.getStorageSync('userData');
			this.userData = userData;
			let params = this.params;
			console.log('params', params);
			if (userData.is_teacher) {
				// 老师
				let { data: counselTeacherOrderData, total: counselTeacherOrderTotal } = await counselTeacherOrder({ type: params?.type || null, limit: 10, page: this.num });
				this.detailsItems = [...this.detailsItems, ...counselTeacherOrderData];
				this.total = counselTeacherOrderTotal;
			} else {
				// 学生
				let { data: counselOrderData, total: counselOrderTotal } = await counselOrder({ type: params?.type || null, limit: 10, page: this.num });
				this.detailsItems = [...this.detailsItems, ...counselOrderData];
				this.total = counselOrderTotal;
				console.log('预约数据', this.total);
			}
		},
		// 完结预约
		async clickFinish(item) {
			await complete({ id: item.id });
			this.Reset();
		},
		// 取消预约
		async clickCancel(item) {
			await refund({ id: item.id });
			this.Reset();
		}
	},
	async onLoad(params) {
		this.params = params;
		console.log('params', params);
		params && (await this.reqLoop());
		params && (await this.OnUpdated());
	}
};
</script>

<style lang="scss">
.common-list {
	// width: 100%;
	height: 159rpx;
	padding: 30rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 138rpx;
		height: 134rpx;
	}
	.img-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 23rpx;
		.img-title {
			font-size: 28rpx;
			color: #3b3a3f;
		}
		.img-text {
			display: flex;
			flex-direction: column;
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 150rpx;
		height: 130rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.tag {
			// width: ;
		}
	}
}
</style>
